import React, { useContext, useEffect, useState } from "react"
import { getSkillLabel, getSkillList } from '@/services/index'
import { ISkillLabel, ISkillListQuery, ISkillListItem } from "@/utils/interface"
import { Table ,Input,Button } from "antd"
import {Link} from "umi"
// import "../index.less"
import { EyeOutlined, RollbackOutlined, FormOutlined, DeleteOutlined, DeliveredProcedureOutlined, SearchOutlined } from '@ant-design/icons';
// 启用了css module
import styles from './postSkill.less'
import classNames from 'classnames';
import {observer} from "mobx-react-lite"
import useStore from "@/context/useStore"



const status = ['全部', '草稿', '已发布', '待审核', '已驳回']

const columns = [
    {
        align:'center',
        title: '岗位名称',
        dataIndex: 'name',
    },
    {
        align:'center',
        title: '专业',
        dataIndex: 'majorName',
    },
    {
        align:'center',
        title: '版本号',
        dataIndex: 'stationVersion',
    },
    {
        align:'center',
        title: '技能数量',
        dataIndex: 'skillNum',
    },
    {
        align:'center',
        title: '作者',
        dataIndex: 'userName',
    },
    {
        align:'center',
        title: '发起时间',
        dataIndex: 'createTime',
    },
    {
        align:'center',
        title: '状态',
        render: (row: ISkillListItem) => <span className={styles[`status${row.status}`]}>{status[Number(row.status)]}</span>,
    },
    {
        align:'center',
        title: '操作',
        render: (row: ISkillListItem) => {
            if (row.status === '3') {
                return <div className={styles.action}>
                    <EyeOutlined style={{ color: '#679cf6' }} />
                    <RollbackOutlined style={{ color: '#679cf6' }} />
                </div>
            } else if (row.status === '1') {
                return <div className={styles.action}>
                    <FormOutlined style={{ color: '#679cf6' }} />
                    <DeliveredProcedureOutlined style={{ color: '#679cf6' }} />
                    <DeleteOutlined style={{ color: '#679cf6' }} />
                </div>
            }
        }
    }
];

const PostSkill: React.FC = () => {
    let [skillLabel, setSkillLabel] = useState<ISkillLabel[]>([])
    let [curSkill, setCurSkill] = useState('')
    let [curStatus, setCurStatus] = useState(0)
    let [dataSource, setDataSource] = useState<ISkillListItem[]>([])
    let [isMyInfo, setMyInfo] = useState(false);
    let [title, setTitle] = useState('');
    let [searchTitle, setSearchTitle] = useState('');
    let queryParams:ISkillListQuery = { isAsc: 'desc', searchTitle: '', pageNum: 1, pageSize: 10, isMyInfo: false };

    let {skill}=useStore()

    //发起请求  获取专业标签
    useEffect(() => {
        skill.getSkillLabel()
    }, [])

    //发起请求  获取项目列表
    useEffect(() => {
        let queryParams: ISkillListQuery = {} as ISkillListQuery
        //拼接参数
        if (curStatus) {
            queryParams = { ...queryParams, majorId: curSkill, status: curStatus }
        } else {
            queryParams = { ...queryParams, majorId: curSkill, status: '' as unknown as number }
        }
        getSkillList(queryParams).then(res => {
            // console.log('res',res);
            if (res.code == 200) {
                // console.log(res.rows);
                
                setDataSource(res.rows)
            }
        })
    }, [curSkill, curStatus, isMyInfo, searchTitle]);

    
    

    return (
        <div className={styles.postskill}>
            <div className={styles.box}>
                <section className={styles.post}>
                    <section className={styles.major}>
                        <h2>专业：</h2>
                        <ul className={styles.statusList}>
                            <span onClick={e => setCurSkill('')} className={ curSkill == '' ?classNames(styles.span, styles.active) : styles.span }>全部</span>
                            {
                            skill.skillLabel.map(item => {
                                return <span className={item.id === curSkill ? classNames(styles.span, styles.active) : styles.span} 
                                onClick={e => setCurSkill(item.id)} key={item.id}>{item.name}</span>
                            })
                        }
                    </ul>
                    </section>
                    <section className={styles.state}>
                        <h2>状态：</h2>
                        <ul>
                            {
                                status.map((item, index) => {
                                    return <span className={index === curStatus ? classNames(styles.active) : ''} 
                                    key={item} onClick={e => setCurStatus(index)}>{item}</span>
                                })
                            }
                        </ul>
                    </section>
                </section>

                <div className={styles.table}>
                    <div className={styles.table_res}>
                        <div className={styles.search}>
                            <div className={styles.s1}>
                                <input type="checkbox" checked={isMyInfo} onChange={e=>setMyInfo(e.target.checked)} style={{marginLeft:"5px"}}/><span>仅看我的</span>
                            </div>
                            <Input style={{width:'210px',height:'35px'}} className={styles.input} placeholder="搜索岗位" suffix={<SearchOutlined onClick={()=>setSearchTitle(title)}/>} value={title} onChange={e=>setTitle(e.target.value)} onKeyDown={e=>{
                                if (e.keyCode === 13){
                                    setSearchTitle(title)
                                }
                            }}/>
                            <Link to="/teachers/addPostSkill?see=false">
                                <button className={styles.input_button}>+添加岗位</button>
                            </Link>
                        </div>
                        <Table rowKey='stationId' dataSource={dataSource} columns={columns as any} />
                    </div>
                </div>
            </div>
        </div>
    )
}


export default observer(PostSkill)